<template>
 <view class="city-discovery">
  <view class="header">
   <text class="title">城市探索</text>
  </view>
  
  <view class="city-intro">
   <text class="intro-title">泉州风光</text>
  <view style="height: auto; width: 320px; margin: auto; ">
   <swiper indicator-dots autoplay interval="3000">
    <swiper-item v-for="(item, index) in swiperList" :key="index">
     <image :src="item.imageUrl" class="swiper-image" mode="aspectFill"></image>
    </swiper-item>
   </swiper>
  </view>
  </view>

  <!-- 城市介绍 -->
  <view class="city-intro">
   <text class="intro-title">泉州介绍</text>
   <text class="intro-title">海上丝绸之路起点 - 泉州</text>
   <text class="intro-desc">
    历史文化：泉州是国务院首批公布的24个历史文化名城之一，是古代海上丝绸之路的"起点"，宋元时期被誉为"东方第一大港"。
    著名景点：清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。
    特色文化：<text class="intro-content">南音、木偶戏</text>和<text class="intro-content">闽南建筑</text>等丰富的非物质文化遗产。
   </text>
  </view>

  <!-- 探索进度 -->
  <view class="progress">
   <text class="progress-title">探索进度</text>
   <text class="progress-subtitle">当前进度: 30%</text>
   <view class="progress-bar">
    <view class="progress-inner" :style="{ width: '30%' }"></view>
   </view>
   <text class="progress-percent">30%</text>
  </view>

  <!-- 选择城市 -->
  <view class="select-city">
   <text class="select-title">选择城市</text>
   <text class="city-path">当前选择: 福建省 - 泉州市 - 南安市</text>
  </view>

  <!-- 泉州宣传视频区域 -->
  <view class="quanzhou-promotion">
   <text class="promotion-title">泉州宣传</text>
   <!-- 视频播放 -->
   <video src="/static/city-video.mp4" controls="true" play-btn-position autoplay></video>
   <!-- 播放进度显示 -->
   <view class="video-progress">
    <text>{{ formatTime(currentTime) }} / {{ formatTime(videoDuration) }}</text>
   </view>
  </view>

  <!-- 泉州背景音乐区域 -->
  <view class="quanzhou-music">

   <text class="music-title">泉州背景音乐</text>

   <!-- 播放按钮 -->
   <button @click="playMusic" class="play-btn">{{ isPlaying ? '暂停' : '播放' }}</button>
   <text class="music-desc">泉州南音 - 泉州传统乐团</text>
   <!-- 音乐进度条 -->
   <view class="music-progress">
    <slider :value="musicProgress" @change="onMusicProgressChange" min="0" max="100"></slider>
    <text>{{ formatTime(musicCurrentTime) }} / {{ formatTime(musicDuration) }}</text>
   </view>
  </view>

  <!-- 偏好设置区域 -->
  <view class="preference">
   <text class="preference-title">偏好设置</text>
   <view class="travel-way">
    <text class="way-title">出行方式</text>
    <radio-group @change="onTravelWayChange">
     <label>
      <radio value="bus" :checked="travelWay === 'bus'">公交</radio>
     </label>
     <label>
      <radio value="self" :checked="travelWay === 'self'">自驾</radio>
     </label>
     <label>
      <radio value="walk" :checked="travelWay === 'walk'">步行</radio>
     </label>
    </radio-group>
   </view>
   <view class="show-recommend">
    <text class="show-title">显示推荐景点</text>
    <switch :checked="showRecommend" @change="onShowRecommendChange"></switch>
   </view>
   <view class="search-radius">
    <text class="radius-title">探索半径: {{ searchRadius }}km</text>
    <slider :value="searchRadius" @change="onSearchRadiusChange" min="1" max="20"></slider>
   </view>
  </view>
 </view>
</template>

<script>
 export default {
  data() {
   return {
    // 视频相关数据
    videoUrl: '/static/city-vi.mp4', // 视频资源路径
    videoDuration: 64, // 视频总时长（秒）
    currentTime: 0, // 视频当前播放时间（秒）

    // 音乐相关数据
    musicUrl: '/static/city-music.mp3', // 音乐资源路径
    musicDuration: 180, // 音乐总时长（秒）
    musicCurrentTime: 0, // 音乐当前播放时间（秒）
    musicProgress: 0, // 音乐播放进度（0-100）
    isPlaying: false, // 音乐是否正在播放
    musicInstance: null, // 音乐实例

    // 偏好设置数据
    travelWay: 'bus', // 出行方式，默认公交
    showRecommend: true, // 是否显示推荐景点
    searchRadius: 12, // 探索半径，默认12km

    swiperList: [{
      imageUrl: '/static/city1.png'
     },
     {
      imageUrl: '/static/city2.jpg'
     },
     {
      imageUrl: '/static/city3.jpg'
     },
     {
      imageUrl: '/static/city4.jpg'
     },
     {
      imageUrl: '/static/city5.jpg'
     },

    ]
   };
  },
  onLoad() {
   // 创建音乐实例
   this.musicInstance = uni.createInnerAudioContext();
   this.musicInstance.src = this.musicUrl;
   this.musicInstance.onTimeUpdate(() => {
    this.musicCurrentTime = this.musicInstance.currentTime;
    this.musicProgress = (this.musicCurrentTime / this.musicDuration) * 100;
   });
   this.musicInstance.onEnded(() => {
    this.isPlaying = false;
    this.musicCurrentTime = 0;
    this.musicProgress = 0;
   });
  },
  methods: {
   // 视频时间更新
   onTimeUpdate(e) {
    this.currentTime = e.detail.currentTime;
   },
   // 视频播放结束
   onVideoEnded() {
    this.currentTime = 0;
   },
   // 格式化时间（秒转分:秒）
   formatTime(seconds) {
    const minutes = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
   },
   // 播放/暂停音乐
   playMusic() {
    if (this.isPlaying) {
     this.musicInstance.pause();
    } else {
     this.musicInstance.play();
    }
    this.isPlaying = !this.isPlaying;
   },
   // 音乐进度改变
   onMusicProgressChange(e) {
    const progress = e.detail.value;
    const time = (progress / 100) * this.musicDuration;
    this.musicInstance.seek(time);
   },
   // 出行方式改变
   onTravelWayChange(e) {
    this.travelWay = e.detail.value;
   },
   // 显示推荐景点开关改变
   onShowRecommendChange(e) {
    this.showRecommend = e.detail.value;
   },
   // 探索半径改变
   onSearchRadiusChange(e) {
    this.searchRadius = e.detail.value;
   },
  },
  onUnload() {
   // 页面卸载时销毁音乐实例
   if (this.musicInstance) {
    this.musicInstance.destroy();
   }
  },
 };
</script>

<style scoped>
 .city-discovery {
  padding: 15px;
  background-color: #f9f9f9;

 }

 .header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
 }

 .title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
 }

 .city-img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 15px;
 }

 .city-intro {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }

 .intro-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
  color: #333;
 }

 .intro-content {
  font-size: 14px;
  color: #0f80ff;
  margin-bottom: 0px;
 }

 .intro-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
 }

 .progress {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }

 .progress-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
  color: #333;
 }

 .progress-subtitle {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  display: block;
 }

 .progress-bar {
  width: 100%;
  height: 10px;
  background-color: #eee;
  border-radius: 5px;
  overflow: hidden;
 }

 .progress-inner {
  height: 100%;
  background-color: #007AFF;
  border-radius: 5px;
  transition: width 0.3s ease;
 }

 .progress-percent {
  font-size: 14px;
  color: #007AFF;
  margin-top: 5px;
  display: block;
  text-align: right;
 }

 .select-city {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }

 .select-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  display: block;
  color: #333;
 }

 .city-path {
  font-size: 14px;
  color: #333;
  padding: 8px;
  background-color: #f5f5f5;
  border-radius: 4px;
  display: block;
 }

 /* 泉州宣传区域样式 */
 .quanzhou-promotion,
 .quanzhou-music,
 .preference {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }

 .promotion-title,
 .music-title,
 .preference-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
  color: #333;
 }

 .promo-video {
  width: 100%;
  height: auto;
  border-radius: 4px;
 }

 .video-progress,
 .music-progress {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
 }

 .play-btn {
  background-color: #007AFF;
  color: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  margin-bottom: 10px;
 }

 .music-desc {
  text-align: center;
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
 }

 /* 偏好设置样式 */
 .travel-way,
 .show-recommend,
 .search-radius {
  margin-bottom: 15px;
 }

 .way-title,
 .show-title,
 .radius-title {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #333;
 }

 radio-group {
  display: flex;
  flex-wrap: wrap;
 }

 label {
  margin-right: 15px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
 }

 slider {
  width: 100%;
  margin-top: 5px;
 }

 .show-recommend {
  display: flex;
  justify-content: space-between;
  align-items: center;
 }
</style>